<!--
 * @author  dumeng
 新建/编辑调查问卷
-->
<template>
  <div class="survey-manage">
    <div class="page-title">试题审核 :</div>
    <section class="page-main">
        <el-form
            ref="baseform"
            :model="baseform"
            :rules="baserules"
            label-width="80px"
            label-position="left"
            class="edit-ques-form"
        >
          <el-form-item label="试题类型">
            <el-select
                v-model="baseform.answer.type"
                :disabled="!isedit"
                filterable
                @change="typeChange"
            >
              <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="试题难度" prop="difficultyId">
            <el-select v-model="baseform.difficultyId" :disabled="!isedit" filterable>
              <el-option
                  v-for="item in diffOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="题干" prop="question">
            <el-input
                v-model.trim="baseform.question"
                :disabled="!isedit"
                :rows="2"
                type="textarea"
                placeholder="题干这里填写题目描述"
            />
          </el-form-item>
          <div v-if="answerType == 1">
            <!--                    单选题-->
            <div class="title" style="margin-bottom: 15px">
              选择项
              <span>（正确选项 单、多选题的选项范围从2到8）</span>
            </div>
            <el-form-item
                v-for="(answer, index) in answers"
                :key="answer.key"
                :label="answerMap[index]"
                :rules="{ required: true, message: '请输入选项内容', trigger: 'blur'}"
                label-width="35px"
                class="answer"
            >
              <el-input
                  v-model.trim="answer.value"
                  :disabled="!isedit"
                  placeholder="请输入本选项内容"
                  style="width: 92%"
              />
              <span v-if="isedit" style="margin-left: 7px" @click.prevent="removeAnswer(answer)">
              <i class="el-icon-delete" />
            </span>
            </el-form-item>
            <el-form-item label=" " label-width="30px">
              <el-button icon="el-icon-circle-plus" :disabled="!isedit" @click="addAnswer">添加一个选项</el-button>
            </el-form-item>
            <el-form-item label="正确答案" prop="rightanswer">
              <el-radio-group v-model="baseform.rightanswer">
                <el-radio
                    v-for="(answer, index) in answers"
                    :key="answer.key"
                    :disabled="!isedit"
                    :label="answer.value"
                >{{ answerMap[index] }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="试题解析">
              <el-input
                  v-model.trim="baseform.quesAnalysis"
                  :disabled="!isedit"
                  :rows="2"
                  type="textarea"
                  placeholder="添加试题解析，便于更好的理解答案"
              />
            </el-form-item>
          </div>
          <!--                    多选题-->
          <div v-if="answerType == 2">
            <div class="title" style="margin-bottom: 15px">
              选择项（正确选项 单、多选题的选项范围从2到8）
              <span />
            </div>
            <el-form-item
                v-for="(answer, index) in answers"
                :key="answer.key"
                :label="answerMap[index]"
                :rules="{required: true, message: '请输入选项内容', trigger: 'blur'}"
                label-width="35px"
                class="answer"
            >
              <el-input
                  v-model.trim="answer.value"
                  :disabled="!isedit"
                  placeholder="请输入本选项内容"
                  style="width: 92%"
              />
              <span v-if="isedit" style="margin-left: 7px" @click.prevent="removeAnswer(answer)">
              <i class="el-icon-delete" />
            </span>
            </el-form-item>
            <el-form-item label=" " label-width="30px">
              <el-button v-if="isedit" icon="el-icon-circle-plus" @click="addAnswer">添加一个选项</el-button>
            </el-form-item>
            <el-form-item label="正确答案" prop="rightanswerCheck">
              <el-checkbox-group v-model="baseform.rightanswerCheck">
                <el-checkbox
                    v-for="(answer, index) in answers"
                    :key="answer.key"
                    :disabled="!isedit"
                    :label="answer.value"
                >
                  {{
                    answerMap[index] }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="试题解析">
              <el-input
                  v-model.trim="baseform.quesAnalysis"
                  :disabled="!isedit"
                  :rows="2"
                  type="textarea"
                  placeholder="添加试题解析，便于更好的理解答案"
              />
            </el-form-item>
          </div>
          <div v-if="answerType == 3">
            <el-form-item label="正确答案" prop="rightanswer">
              <el-radio-group v-model="baseform.rightanswer" :disabled="!isedit">
                <el-radio label="对">正确</el-radio>
                <el-radio label="错">错误</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="试题解析">
              <el-input
                  v-model.trim="baseform.quesAnalysis"
                  :disabled="!isedit"
                  :rows="2"
                  type="textarea"
                  placeholder="添加试题解析，便于更好的理解答案"
              />
            </el-form-item>
          </div>
          <div v-if="answerType == 4">
            <el-form-item label="正确答案" prop="rightanswer">
              <el-input
                  v-model.trim="baseform.rightanswer"
                  :disabled="!isedit"
                  placeholder="请输入答案，多种形式的答案请用/隔开（例：答案1/答案2）"
              />
            </el-form-item>
            <el-form-item label="试题解析">
              <el-input
                  v-model.trim="baseform.quesAnalysis"
                  :disabled="!isedit"
                  :rows="2"
                  type="textarea"
                  placeholder="添加试题解析，便于更好的理解答案"
              />
            </el-form-item>
          </div>
          <div v-if="answerType == 5">
            <el-form-item label="正确答案" prop="rightanswer">
              <el-input
                  v-model.trim="baseform.rightanswer"
                  :disabled="!isedit"
                  :rows="4"
                  type="textarea"
                  placeholder="请输入主观题答案"
              />
            </el-form-item>
            <el-form-item label="试题解析">
              <el-input
                  v-model.trim="baseform.quesAnalysis"
                  :disabled="!isedit"
                  :rows="2"
                  type="textarea"
                  placeholder="添加试题解析，便于更好的理解答案"
              />
            </el-form-item>
          </div>
          <el-form-item v-if="!isedit" label="分配题库:">
            <span v-if="clickTree.question" class="quesClassify-data">{{ clickTree.question }}</span>
            <span class="quesClassify" @click="handleSelCfy">选择题库</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
              v-if="!isedit"
              v-loading.fullscreen.lock="fullscreenLoading"
              style="padding: 8px 30px;"
              @click="passthrough(2)"
          >跳 过</el-button>
          <el-button v-if="isedit" style="padding: 8px 30px;" @click="onSubmint('baseform')">修 改</el-button>
          <el-button
              v-if="!isedit"
              style="padding: 8px 30px;"
              type="primary"
              @click="passthrough(1)"
          >（通过）下一题</el-button>
        </div>
    </section>
    <section class="page-footer">
      <el-button
          style="padding: 10px 30px"
          @click="
          () => {
            $router.back()
          }
        "
      >取 消</el-button>
      <el-button type="primary" @click="onSubmint()">确定</el-button>
    </section>
    <el-dialog :visible.sync="tkfpDialogVisible" title="分配题库" center width="450px" top="25vh">
      <div class="check-con">
        <el-form label-position="left" label-width="80px" style="width: 100%;">
          <el-form-item label="分配题库:">
            <span v-if="clickTree.question" class="quesClassify-data">{{ clickTree.question }}</span>
            <span class="quesClassify" @click="handleSelCfy">选择题库</span>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="tkfpDialogVisible = false">取 消</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="tkfpSubmit()">确 认</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="tkfpDialogVisible" title="分配题库" center width="450px" top="25vh">
      <div class="check-con">
        <el-form label-position="left" label-width="80px" style="width: 100%;">
          <el-form-item label="分配题库:">
            <span v-if="clickTree.question" class="quesClassify-data">{{ clickTree.question }}</span>
            <span class="quesClassify" @click="handleSelCfy">选择题库</span>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="tkfpDialogVisible = false">取 消</el-button>
        <el-button style="padding: 8px 30px;" type="primary" @click="tkfpSubmit()">确 认</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="qcDialogVisible" title="试题分类" center width="450px" top="20vh">
      <div class="classify-tree-con">
        <el-input v-model.trim="filterText" placeholder="输入关键字进行过滤" />
        <el-tree
            ref="qctree"
            v-loading="treeloading"
            :data="qctreedata"
            :props="defaultProps"
            :filter-node-method="filterNode"
            :render-content="renderContent"
            :expand-on-click-node="false"
            :load="loadtree"
            lazy
            node-key="id"
            class="filter-tree"
            @node-click="handleNodeClick"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
            style="padding: 8px 30px;"
            @click="qcDialogVisible = false"
        >{{ $t('table.cancel') }}</el-button>
        <el-button
            style="padding: 8px 30px;"
            type="primary"
            @click="subQuesCfy"
        >{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import waves from '@/directive/waves' // Waves directive
import { getDictByCode } from '@/views/collectQuestions/stsh/api'
export default {
  name: 'SurveyManage',
  directives: { waves },
  filters: {
    quesType(type) {
      if (type === 1) {
        return '单选题'
      } else if (type === 2) {
        return '多选题'
      } else if (type === 3) {
        return '判断题'
      } else if (type === 4) {
        return '填空题'
      } else if (type === 5) {
        return '主观题'
      }
    },
    quesVerifyStatus(type) {
      if (type === 0) {
        return '未审核'
      } else if (type === 1) {
        return '通过'
      } else if (type === 2) {
        return '不通过'
      }
    }
  },
  data() {
    return {
      styleId: '',
      searchshow: true,
      treeloading: false,
      total: 0,
      filterText: '',
      skipPage: 2,
      fullscreenLoading: false,
      search: {
        question: ''
      },
      listQuery: {
        page: 1,
        limit: 10,
        title: '',
        question: '',
        comName: '',
        realName: '',
        type: ''
      },
      isedit: false,
      list: [
        {
          name: '题干',
          type: '试题类型',
          realName: '出题人',
          entNmae: '出题人',
          beginTime: '出题时间'
        }
      ],
      listLoading: false,
      multipleSelection: [],
      checkDialogVisible: false,
      tkfpDialogVisible: false,
      baseform: {
        type: 3,
        classifyId: '',
        difficultyId: '1000',
        question: '',
        answer: '',
        useType: 1,
        rightanswer: '',
        rightanswerCheck: [],
        quesAnalysis: ''
      },
      baserules: {
        type: [{ required: true, message: '请选择试题类型', trigger: 'change' }],
        difficultyId: [{ required: true, message: '请选择试题难度', trigger: 'change' }],
        question: [{ required: true, message: '请输入题干', trigger: 'change' }],
        classifyId: [{ required: true, message: '请选择试题分类', trigger: 'change' }],
        answer: [{ required: true, message: '请设置选项', trigger: 'change' }],
        rightanswer: [{ required: true, message: '请设置正确答案', trigger: 'change' }],
        rightanswerCheck: [{ required: true, message: '请设置正确答案', trigger: 'change' }]
      },
      diffOptions: [
        {
          value: '1000',
          label: '简单'
        }, {
          value: '1020',
          label: '普通'
        }, {
          value: '1040',
          label: '困难'
        }
      ],
      typeOptions: [
        {
          value: 1,
          label: '单选题'
        }, {
          value: 2,
          label: '多选题'
        }, {
          value: 3,
          label: '判断题'
        }, {
          value: 4,
          label: '填空题'
        }, {
          value: 5,
          label: '主观题'
        }
      ],
      answerMap: {
        0: 'A',
        1: 'B',
        2: 'C',
        3: 'D',
        4: 'E',
        5: 'F',
        6: 'G',
        7: 'H'
      },
      answers: [
        { value: '' },
        { value: '' },
        { value: '' },
        { value: '' }
      ],
      answerdata: {},
      answerType: '1',
      clickTree: {},
      qcDialogVisible: false,
      qctreedata: [],
      defaultProps: {
        children: 'children',
        label: 'question'
      },
      ruleAnswer: {}
    }
  },
  watch: {
    filterText(val) {
      this.$refs.qctree.filter(val)
    }
  },
  created() {
    for (const i in this.dict) {
      this.getDict(i)
    }
    this.handlerData(this.$route.query)
  },
  methods: {
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code)
            .then(response => {
              this.dict[code] = response.data.data[0].list
              resolve()
            })
            .catch(error => {
              reject(error)
            })
      })
    },
    handlerData(row) {
      this.checkDialogVisible = true
      this.$nextTick(() => {
        this.baseform.id = row.id
        this.baseform.type = JSON.parse(row.answer).type
        this.baseform.classifyId = row.classifyId
        this.baseform.difficultyId = row.difficultyId
        this.baseform.question = row.question
        this.baseform.answer = JSON.parse(row.answer)
        this.baseform.useType = row.useType
        this.baseform.quesAnalysis = row.quesAnalysis
        this.clickTree['id'] = row.classifyId
        this.clickTree['question'] = row.classifyName
        this.setAnswers(row.answer)
      })
    },
    /*
    * 过滤试题
    * */
    setAnswers(str) {
      var t = window.JSON.parse(str)
      var answer = t.answer
      this.answerType = t.type
      if (t.type === 1) {
        const opt = t.opt
        const arr = []
        opt.forEach(item => {
          var obj = {
            value: item
          }
          arr.push(obj)
        })
        this.answers = arr
        this.baseform.rightanswer = answer[0]
      } else if (t.type === 2) {
        const opt = t.opt
        const arr = []
        opt.forEach(item => {
          var obj = {
            value: item
          }
          arr.push(obj)
        })
        this.answers = arr
        this.baseform.rightanswerCheck = answer
      } else if (t.type === 3) {
        this.baseform.rightanswer = answer[0]
        // const opt = t.opt
        // const arr = []
        // opt.forEach(item => {
        //   var obj = {
        //     value: item
        //   }
        //   arr.push(obj)
        // })
        // this.answers = arr
        // this.baseform.rightanswerCheck = answer
      } else {
        this.baseform.rightanswer = answer[0]
      }
    },
    onSubmint() {
      if (this.auditResult !== '') {
        const params = {
          id: this.form.id,
          classifyId: this.form.classify_id,
          auditResult: this.auditResult,
          auditExplain: this.auditExplain
        }
        this.$router.back()
        /*  return new Promise((resolve, reject) => {
          review(params)
            .then(res => {
              this.$message.success('审核成功')
              this.$router.back()
            })
            .catch(error => {
              reject(error)
            })
        }) */
      } else {
        this.$message.error('请选择审核结果')
      }
    },
    typeJudg(item) {
      let chineseText
      switch (item) {
        case '10':
          chineseText = '单选'
          break
        case '20':
          chineseText = '多选'
          break
        case '30':
          chineseText = '判断'
          break
        case '40':
          chineseText = '填空'
          break
        case '50':
          chineseText = '简答'
          break
      }
      return chineseText
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.survey-manage {
  background-color: #fff;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: hidden;
  .page-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    &:before {
      content: '';
      position: absolute;
      width: 2px;
      @include bg-color($mainColor);
      top: 13px;
      bottom: 13px;
      left: 15px;
    }
  }

  .page-main {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 52px;
    box-sizing: border-box;
    padding: 0 10px;
    overflow: hidden;
    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }
    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }
    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }
    &:hover {
      overflow: auto;
    }
    .form {
      width: 1000px !important;
      margin: 0 auto;
      .el-select {
        width: 100%;
      }

      .line {
        text-align: center;
      }
    }
    .options{
      margin-right: 20px;
    }
  }
  .page-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -3px 6px #f5f5f5;
  }
}
</style>
